<template>
  <div class="addrygl-all">
    <el-form ref="ruleForm" :model="ruleForm">
      <div class="l-addrygl">
        <!-- <h2>基本信息</h2> -->
        <!-- 返回 -->
        <div class="l-addrygl-1">
          <div></div>
          <div class="l-addrygl-back" @click="back()">返回</div>
          <div class="head-span">新增人员</div>
        </div>
        <!-- 单位信息 -->
        <div class="l-addrygl-1-1">
          <div class="l-addrygl-3-1">单位信息</div>
          <div class="l-addrygl-3-2">
            <el-row>
              <el-col :span="6">
                <el-form-item prop="people_status">
                  <div>单位名称</div>
                  <el-select v-model="ruleForm.company_id" @change="sechange()" placeholder="请选择">
                    <el-option
                      v-for="item in linput1"
                      :key="item.company_id"
                      :label="item.company_name"
                      :value="item.company_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="统一信用代码" prop="people_id">
                  <el-input v-model="ruleForm.company_code" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="people_status">
                  <div>单位类型</div>
                  <el-select v-model="ruleForm.company_type_id" :disabled="true">
                    <el-option
                      v-for="item in linput1"
                      :key="item.buildCompanyType.company_type_id"
                      :label="item.buildCompanyType.company_type_name"
                      :value="item.buildCompanyType.company_type_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 人员信息 -->

        <div class="l-addrygl-2">
          <div class="l-addrygl-2-1">人员信息</div>

          <!-- input框 -->
          <div class="l-addrygl-2-2">
            <!-- 第一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="工号" prop="people_id">
                  <el-input v-model="ruleForm.people_id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="姓名" prop="people_name">
                  <el-input v-model="ruleForm.people_name"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="联系电话" prop="people_tele">
                  <el-input v-model="ruleForm.people_tele"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="身份证号码" prop="people_cardid">
                  <el-input v-model="ruleForm.people_cardid"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="户籍地址" prop="people_addr">
                  <el-input v-model="ruleForm.people_addr"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="people_status">
                  <div>人员状态</div>
                  <el-select v-model="ruleForm.people_status" placeholder="请选择">
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="年龄" prop="people_age">
                  <el-input v-model="ruleForm.people_age"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" class="dang">
                <el-form-item label="党员" prop="people_member">
                  <el-radio-group v-model="ruleForm.people_member">
                    <el-radio label="0">非党员</el-radio>
                    <el-radio label="1">党员</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row>
              <!-- <div>{{ruleForm.date1}}</div> -->
              <el-col :span="6">
                <el-form-item prop="people_cardstart">
                  <span>身份证办证日期</span>
                  <div>
                    <el-date-picker
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="padding"
                      v-model="ruleForm.people_cardstart"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="people_cardend">
                  <span>身份证失效日期</span>
                  <div>
                    <el-date-picker
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="padding"
                      v-model="ruleForm.people_cardend"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="people_started">
                  <span>入场时间</span>
                  <div>
                    <el-date-picker
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      v-model="ruleForm.people_started"
                      class="padding"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="job_id">
                  <div>管理人员职务类型</div>
                  <el-select v-model="ruleForm.job_id" placeholder="请选择">
                    <el-option
                      v-for="item in linput2"
                      :key="item.job_id"
                      :label="item.job_name"
                      :value="item.job_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第四行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="民族" prop="people_nation">
                  <el-input v-model="ruleForm.people_nation"></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="6">
                <el-form-item prop="people_give">
                  <div>人员状态</div>
                  <el-select v-model="ruleForm.people_give" placeholder="请选择">
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col> -->
              <el-col :span="6" class="dang">
                <el-form-item label="性别" prop="people_sex">
                  <el-radio-group v-model="ruleForm.people_sex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="0">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
  <el-col :span="6">
     <!-- <div class="face">
                <div class="faca-title1">人脸录入</div>
                <div class="face-img"></div>
                <div class="faca-title">录入人脸</div>
              </div> -->
      </el-col>

            </el-row>
            <!-- 第五行 -->
            <!-- <el-row>
              <div class="face">
                <div class="faca-title1">人脸录入</div>
                <div class="face-img"></div>
                <div class="faca-title">录入人脸</div>
              </div>
            </el-row> -->
          </div>
        </div>
       

        <!-- 劳务合同 -->
        <div class="l-addrygl-3">
          <div class="l-addrygl-3-1">劳务合同</div>
          <div class="l-addrygl-3-2">
            <el-row>
              <el-col :span="6">
                <el-form-item label="合同编号" prop="contract_code">
                  <el-input v-model="ruleForm.buildContract.contract_code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="contract_start">
                  <span>合同开始日期</span>
                  <div>
                    <el-date-picker
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="padding"
                      v-model="ruleForm.buildContract.contract_start"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="contract_end">
                  <span>合同失效日期</span>
                  <div>
                    <el-date-picker
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      v-model="ruleForm.buildContract.contract_end"
                      class="padding"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
           <div class="l-chuan">
             <div class="l-shangchuan">
            <el-upload
              action="api/pic/load"
              :headers="userToken"
              :on-success="handleSuccess"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :show-file-list="false"
            >
             <!-- :on-preview="handlePreview"
              :on-remove="handleRemove" -->
              <!-- :before-remove="beforeRemove" -->
        <el-button type="submit" class="clicksub" size="medium">
                上传
                <i class="el-icon-upload el-icon--right"></i>
              </el-button>
            </el-upload>
            </div>
            </div>
          <!-- 劳务合同表格 -->
          <div class="fygl-lwtable">
            <!-- 上传 -->
            <!-- <form>
              <input type="file" @change="getFile($event)" />
              <button
                class="button button-primary button-pill button-small"
                @click="submit($event)"
              >提交</button>
            </form>-->
          <el-table
              border
              ref="singleTable"
              :data="tableData"
              highlight-current-row
              @current-change="handleCurrentChange"
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
              style="width: 100%"
              overflow:scoll
            >
              <el-table-column align="center" label="电子件名称">
                <template>
                  <span>劳务合同</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="name" label="电子件列表（点击查看）" show-overflow-tooltip>
                <!-- <template slot-scope="scope">
                  <a :href="scope.row.name" target="_blank" class="buttonText">{{scope.row.name}}</a>
                </template> -->
              </el-table-column>
              <el-table-column prop="do" label="操作" align="center">
                <!-- <el-button type="submit" @click="del(scope.$index, scope.row)" >删除</el-button> -->
                <template slot-scope="scope">
                  <el-button type="submit" @click="dellao(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
           </div>
            
        </div>

        <!-- 工作经历 -->
        <div class="l-addrygl-4">
          <div class="l-addrygl-4-1">
            <div class="l-addrygl-4-1-left">工作经历</div>
            <div class="l-addrygl-4-1-right" @click="GZadd()">添加</div>
          </div>
          <!-- 工作经历表格 -->
          <div class="rygl-gztable">
            <el-table
              ref="singleTable"
              :data="currList"
              highlight-current-row
              @current-change="handleCurrentChange"
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
              style="width: 100%"
            >
              <el-table-column align="center" type="index" width="50"></el-table-column>
              <el-table-column
                align="center"
                property="experience_start"
                class="padding"
                label="开始日期"
                show-overflow-tooltip
                width="120"
              ></el-table-column>
              <el-table-column
                align="center"
                property="experience_end"
                class="padding"
                label="结束日期"
                show-overflow-tooltip
                width="120"
              ></el-table-column>
              <el-table-column
                align="center"
                property="experience_job"
                show-overflow-tooltip
                label="管理人员职务"
              ></el-table-column>
              <el-table-column
                align="center"
                property="experience_company"
                label="原工作单位名称"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                property="experience_site"
                show-overflow-tooltip
                label="工地名称"
              ></el-table-column>
              <el-table-column property="do" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="del(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="l-fen">
          <div class="f-fenye">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="tableData1.length"
              :page-size="pageSize"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </div>
        <div class="l-addryg-footer">
          <div class="l-tijiao">
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </div>
        </div>
        <!-- 工作经历模态框 -->
        <el-dialog title="工作经历添加" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <div class="gz-dialog">
              <el-row>
                <el-col :span="10">
                  <el-form-item prop="experience_start">
                    <span>开始时间</span>
                    <div>
                      <el-date-picker
                        format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                        class="padding"
                        v-model="form.experience_start"
                        type="date"
                        placeholder="选择日期"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item prop="experience_end">
                    <span>结束时间</span>
                    <div>
                      <el-date-picker
                         format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                        class="padding"
                        v-model="form.experience_end"
                        type="date"
                        placeholder="选择日期"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="职务" prop="experience_job">
                    <el-input v-model="form.experience_job"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="原工作单位名称" prop="experience_company">
                    <el-input v-model="form.experience_company"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="工地名称" prop="experience_site">
                    <el-input v-model="form.experience_site"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="motaikuang()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
import http from "../api";
import axios from "axios";
export default {
  data() {
    // var validateusername = (rule, value, callback) => {
    //   var reg = /^[a-zA-Z]\w{3,7}/;
    //   if (!reg.test(value)) {
    //     callback(new Error("请输入用户名"));
    //   } else {
    //     callback();
    //   }
    // };

    return {
      file: "",
      // 上传

      // fileList: [
      //   {
      //     name: "food.jpeg",
      //     url:
      //       "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
      //   },
      //   {
      //     name: "food2.jpeg",
      //     url:
      //       "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
      //   },
      // ],
      userToken: {}, //usertoken的值
      currPage: 1, //当前页
      currList: [], //当前展示的数据数组
      pageSize: 3,
      linput1: [], //单位名称
      linput2: [], //职务
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        experience_start: "",
        experience_end: "",
        experience_job: "",
        experience_company: "",
        experience_site: "",
      }, //模态框input value值
      formLabelWidth: "120px",
      options1: [
        {
          value: 0,
          label: "待入场",
        },
        {
          value: 1,
          label: "入场",
        },
        {
          value: 2,
          label: "离场",
        },
      ],
      // tableData:[],
      tableData: [
        {
          date: "2016-05-02",
          name: "",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      tableData1: [],
      currentRow: null,

      ruleForm: {
        group_id: "", //班组id
        people_id: "", //工号
        people_name: "", //姓名
        company_id: "", //单位名称
        job_id: "", //管理人员职务类型
        people_tele: "", //联系电话
        people_addr: "", //户籍地址
        people_status: "", //人员状态
        people_age: "", //年龄
        people_member: "", //党员非党员
        people_cardstart: "", //身份证办证日期
        people_cardend: "", //身份证失效日期
        people_nation: "", //民族
        people_sex: "", //性别
        people_give: "", //下发设备
        people_started: "", //入场时间
        people_cardid: "", //身份证号码

        //工作经历
        experience_start: "", //工作经历开始时间
        experience_end: "", //工作经历结束时间
        experience_job: "", //职务
        experience_company: "", //原工作单位名称
        experience_site: "", //工地名称

        //上传
        buildContract: {
          contract_url: "",
          //劳务合同
          contract_code: "", //合同编号
          contract_start: "", //开始时间
          contract_end: "", //结束时间
        },
      },
      value: "",
      // 表单验证规则
      // rules: {
      //   people_id: [{ required: true, message: "请输入工号", trigger: "blur" }],
      //   people_name: [{ required: true, message: "请输入姓名", trigger: "blur"}],
      //   job_id:[{ required: true, message: "请选择管理人员职务类型", trigger: "change"}],
      //   company_id:[{ required: true, message: "请输入单位名称", trigger: "blur"}],
      //   people_tele:[{ required: true, message: "请输入联系电话", trigger: "blur"}],
      //    people_addr:[{ required: true, message: "请输入户籍地址", trigger: "blur"}],
      //   people_status:[{ required: true, message: "请选择人员状态", trigger: "change"}],
      //    people_age:[{ required: true, message: "请输入年龄", trigger: "blur"}],
      //    people_member:[{ required: true, message: "请选择是否为党员", trigger: "change"}],
      //    people_cardstart:[{ required: true, message: "请选择是否为党员", trigger: "change"}],
      //    people_cardend:[{ required: true, message: "请选择日期", trigger: "change"}],
      //      people_nation:[{ required: true, message: "请输入民族", trigger: "change"}],
      //      people_sex:[{ required: true, message: "请选择性别", trigger: "change"}],
      //      people_give:[{ required: true, message: "请选择设备", trigger: "change"}],
      //     people_cardid:[{ required: true, message: "请输入身份证号码", trigger: "change"}],
      //   people_started:[{ required: true, message: "请输入入场时间", trigger: "change"}],

      //   //  DanWeiName: [{ validator: validateDanWeiName, trigger: 'blur' }],
      //   // username: [{ validator: validateusername, trigger: "blur" }],
      //   // idcard: [{ validator: validateidcard, trigger: 'blur' }],
      //   // gonghao: [{ validator: validategonghao, trigger: 'blur' }],
      // },
    };
  },
  methods: {
    // 上传

    // 成功
    handleSuccess(res, file, fileList) {
      console.log("文件", res);
      // this.tableData.buildPeopleMaterial = res;
      // this.file=res.name
      this.tableData[0] = res;
      
      console.log("table",  this.tableData[0]);
      //  console.log("name", this.tableData.buildPeopleMaterial.name);
      this.$notify.success({
        title: "成功",
        message: `文件上传成功`,
      });
    },
    // 删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 改变当前页改变当前页展示
    setCurrList(index) {
      this.currList = this.tableData1.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    // 改变当前页
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);
      console.log(val);
    },
    
    sechange() {
      for (let i = 0; i < this.linput1.length; i++) {
        if (this.ruleForm.company_id === this.linput1[i].company_id) {
          this.ruleForm.company_code = this.linput1[i].company_code;
          this.ruleForm.company_type_id = this.linput1[
            i
          ].buildCompanyType.company_type_id;
        }
      }
      // console.log(this.linput1.company_code)
    },
    // 工作经历的删除
    del(index, row) {
      this.tableData1.splice(index, 1);
      this.setCurrList(1);
    },
    // 工作经历的删除
    dellao(index, row) {
      console.log('row',row)
      // this.tableData.splice(index, 1);
    //  delete row[name]
     for (const key in row) {
      row.name=''
     }
     console.log('this.tableData[0]',this.tableData[0])
      // this.setCurrList(1);
    },

    motaikuang(form) {
      this.tableData1.unshift(this.form);
      console.log("tableData", this.tableData1);
      this.dialogFormVisible = false;
      console.log("form表单", this.form);
      this.setCurrList(1);
    },
    // 模态框出现
    GZadd() {
      this.dialogFormVisible = true;
    },
    // 表格
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 返回
    back() {
      this.$router.push({
        name: "人员管理",
      });
    },
    // 提交
    //
    submitForm(ruleForm) {
      // console.log('form',this.form);
      this.ruleForm.buildExperience = this.form;
      this.ruleForm.buildContract.contract_url = this.tableData[0].name;

      console.log("新增参数", this.ruleForm);
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          http.userAdd(this.ruleForm).then((res) => {
            console.log("新增", res);
          });
          // alert("成功");
          this.$router.push({
            name: "人员管理",
          });
        } else {
          // alert("注册失败");
          return false;
        }
      });
    },
  },
  mounted() {
    // 文件上传成功时的钩子

    // 获取usertoken
    this.userToken.userToken = sessionStorage.getItem("userToken");
    console.log("这是token", this.userToken);
    // console.log( sessionStorage.gettem("userToken",res.data))
    http.input1({}).then((res) => {
      console.log("单位", res.data);
      this.linput1 = res.data; //单位名称
      console.log(this.linput1[0].company_code);
    });
    http.input2({}).then((res) => {
      this.linput2 = res.data; //职务类型
      console.log("职务类型", res.data);
    });
    // ,{headers: { "Content-type": " multipart/form-data;charset=UTF-8" }}
    //  http.load({}).then((res) => {
    //     // this.linput2 = res.data; //职务类型
    //     console.log("上传", res);

    //   });
  },
};
</script>
<style scoped>
.l-chuan{
  width: 100%;
  height:15px;
  /* background: royalblue; */
  /* float: right; */
  /* position: absolute;
  right: 0; */
}
.l-shangchuan{
  float: right;
  margin-right: 2%;
}
.lchuan-table{
  /* margin-top:   30px; */
}
.lchuan-table{
  width: 100%;
  height: 100px;
}
.face-img {
  width: 80px;
  height: 100px;
  background: #f5f7fa;
  margin-top: 10px;
}
.faca-title {
  width: 80px;
  text-align: center;
  color: #409eff;
  margin-top: 10px;
}
.faca-title1 {
  width: 80px;
  text-align: center;
}

.label {
  color: black;
}
.el-input >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
  padding-left: 5px;
}
.el-select >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
  padding-left: 5px;
}
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 35px !important;
}
/* .el-input--prefix .el-input__inner {
    padding-left: 50px;
} */
.el-form {
  /* margin-left: 20px; */
}
.el-row {
  /* width: 650px;  */
  /* height: 80px;
  margin-top: -2px;  */
  /* margin-top: 10px; */
  /* background: blanchedalmond; */
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 239px;
}
.el-col {
  /* width: 1150px; */
  height: 90px;

  /* border: 1px solid gray; */
}

.input-span {
  margin-right: 5px;
}
.add-input {
  width: 300px;
  margin-top: 15px;
  display: inline-block;
  margin-left: 10px;
}
.l-addrygl {
  margin-top: 20px;
  /* margin-left: 20px; */
  /* width: 1200px; */
  height: 640px;
  background: #f1f1f1;
  overflow-y: scroll;
}
.l-addrygl-1 {
  /* position: fixed;
  top: 0; */
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
  display: flex;
  /* position: relative;  */
  justify-content: left;
  align-items: center;
}
.l-addrygl-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}

.l-addrygl-1-1 {
  width: 100%;
  height: 182px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.fygl-lwtable {
  width: 100%;
  /* height: 150px; */
  /* margin: 0 auto; */
  background: rosybrown;
   margin-top: 20px; 
  /* position: relative; */
  /* margin-top: -20px; */
}
.l-addrygl-2 {
  width: 100%;
  height: 580px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.l-addrygl-2-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  /* background-color: lightcoral; */
  /* border-bottem: 1px solid #f2f2f2; */
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
/* .l-addrygl-3-2 {
 
  
} */
/* .gz-dialog{
    margin-left: 100px;  
} */
.l-addrygl-4-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  /* border: 1px solid #f2f2f2; */
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

.l-addrygl-4-1-right {
  color: #409eff;
  font-size: 14px;
  margin-right: 40px;
  cursor: pointer;
}
.dang {
  height: 40px;
  margin-top: 40px;
  /* margin-top: 40px; */
}

.l-addrygl-3 {
  /* overflow: hidden;
  overflow-y: scroll; */
  width: 100%;
  height: 300px;
  padding-left: 20px;
  background-color: white;
  /* background: lightblue; */
  margin-top: 20px;
}

/* 劳务合同表格 */
.fygl-lwtable {
  width: 98%;
  /* margin-left: 0.5%; */
}
.l-addrygl-4 {
  width: 100%;
  /* height: 502px; */
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}

/* .el-dialog__body{
  height: 430px !important;
} */
/* .dialog-footer {
  float: right;
} */

.rygl-gztable {
  margin-top: 10px;
  width: 98%;
}
.gz-dialog {
  width: 600px;
  margin: 0 auto;
  /* margin-left: 40px; */
}
.gz-dialog >>> .el-row {
  width: 600px;
}
.gz-dialog >>> .el-col {
  margin-left: 50px;
}
.l-addryg-footer {
  width: 100%;
  height: 100px;
  background: white;
  padding-top: 15px;
}
.l-tijiao {
  width: 170px;
  height: 40px;
  text-align: center;
  margin-top: 10px;
  float: right;
  margin-right: 10px;
}
.l-fen {
  width: 100%;
  height: 60px;
  background: white;
}
.f-fenye {
  float: right;
  margin-top: 15px;
  margin-right: 15px;
}
.clicksub {
  margin-left: 150px;
  margin-top: -20px;
  /* background-color: aquamarine; */
}
/* .el-dialog__body{
  margin-top: 10px;
} */
</style>